<template>
	<view class="nav-bg-cover" :style="cStyle">
		<slot></slot>
	</view>
</template>

<script setup>
	import util from '@/utils/util';
	import {
		computed
	} from 'vue';

	defineOptions({
		name: 'nav-bg-cover'
	});

	const props = defineProps({
		url: {
			type: String,
			default: '/static/images/bg-cover-user.png'
		},
		background: String,
		bottom: {
			type: Number,
			default: 0
		},
		backgroundPosition: {
			type: String,
			default: 'left top'
		},
		backgroundSize: {
			type: String,
			default: '100% 100%'
		}
	});

	const cStyle = computed(() => {
		return {
			backgroundImage: props.background ? props.background : `url(${util.requestUrl() + props.url})`,
			backgroundPosition: props.backgroundPosition,
			backgroundSize: props.backgroundSize,
			paddingBottom: props.bottom + 'rpx',
		}
	});
</script>

<style lang="scss">
	.nav-bg-cover {
		width: 100%;
		min-height: 100rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
</style>